<template>
	<el-menu unique-opened  
        @select="handleSelect"
        @open="handleOpen" @close="handleClose">
		<el-submenu v-for="(subMenu, index) in filterMenu" :key="index" :index="String(index)">
			<template slot="title">
                <span class="submenu"><img :src="subMenu.icon">{{subMenu.name}}</span>
			</template>
			<el-menu-item-group v-if="subMenu.childMenu">
                <el-menu-item 
                    v-for="(menuItem, mIndex) in subMenu.childMenu" 
                    :key="mIndex" :index="menuItem.path" 
                    :route="{path: menuItem.path}"
                    >{{menuItem.name}}</el-menu-item>
			</el-menu-item-group>
		</el-submenu>
	</el-menu>
</template>


<script>
import { mapState, mapMutations } from 'vuex';
import menuList from './../constant/MenuList';
import CookieNames from './../constant/CookieName';

	export default {
        name: 'SideNav',
        data(){
            return {};
        },
        computed: {
            ...mapState({
                rentMenu: 'menuList'
            }),
            filterMenu() {  // 目前只考虑两层菜单
                let menus = [];
                menuList.forEach(item=>{
                    let copyMenu = JSON.parse(JSON.stringify(item));
                    let fMenu = this.rentMenu.find(menu=>menu.menuCode === item.menuCode);
                    if( fMenu ) {
                        let originChild = copyMenu.childMenu;   // 原始菜单
                        copyMenu.childMenu = [];

                        if( fMenu.childMenu ) {
                            fMenu.childMenu.forEach(c=>{    // 服务器二级菜单
                                let fChild = originChild.find(item=>c.menuCode === item.menuCode);
                                fChild && copyMenu.childMenu.push(fChild);
                            });
                        }

                        menus.push(copyMenu);
                    }
                });
                return menus;
            }
        },
        toLogin(){
            Object.keys(CookieNames).forEach(key=>{
                this.$cookie.set(key, '', -1);
            });
            this.$router.replace({name: 'login'});
        },
        created() {
            let userNo = this.$cookie.get(CookieNames.USER_NO);
            // 获取用户信息[刷新]
            this.$svHttp.httpGet(this.$svHttp.Api.uInfo+userNo, {userNo})
                .then(response=>{
                    if( response ) {
                        let { result } = response;
                        if( result ) {
                            let { user, menuList } = result;
                            this.saveUser(result.user);
                            this.saveMenu(result.menuList);
                            this.fetchRoleOperation(result.user);
                        }
                    } else {
                        this.toLogin();
                    }
                });
        },
		methods: {
            ...mapMutations({
                saveUser: 'commitUser',
                saveMenu: 'commitMenu',
                savePermission: 'commitAvailablePermission'
            }),
            // 根据角色抓取可用权限 -> 按钮
            fetchRoleOperation(user){
                let roleCode = user.roleCode;
                this.$svHttp.httpGet(this.$svHttp.Api.allPermission, {
                    roleCode,
                    pageIndex: 1,
                    pageSize: 500
                }).then(response=>{
                    if( response ) {
                        let result = response.result;
                        let list = result.records;
                        this.savePermission(list);
                    }
                });
            },
			handleOpen(key, keyPath) {
				// console.log(key, keyPath);
			},
			handleClose(key, keyPath) {
				// console.log(key, keyPath);
            },
            handleSelect(index){
                let name = index, menuCode = '';
                for(let menu of menuList){
                    if( Array.isArray(menu.childMenu) ) {
                        let curMenu = menu.childMenu.find(subMenu=>subMenu.path === name);
                        if(curMenu) {
                            menuCode = curMenu.menuCode;
                            break;
                        }
                    }
                }
                window.sessionStorage.setItem('wn_menuCode', menuCode);
                this.$router.push({name: index, params: {menuCode}});
            }
		}
	}

</script>

<style lang="scss" scoped>
    .submenu{
        font-size:14px;
        color:#303133;
        img{
            margin-top: -3px;
            margin-right: 11px;
        }
    }
</style>
